<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form Demo</title>
		<!--加入web样式表 rel="stylesheet"-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>
	<body>
		<!--
		 主要包含 内联表单 水平表单 被支持的空间 内联控件  焦点状态 禁用状态  只读状态 校验状态 空间尺寸 辅助文本
		 form-inline 加入内联表单 就变成自适应了 且必须设置label 否则屏幕阅读器是无法解析的
		 但可以 将其隐藏 class="sr-only"
		
		<form role="form" class="form-inline">
			<div class="form-group ">
				<!--显示当前输入的内容
				<label class="sr-only">用户</label>
				<input class="form-control" type="text" placeholder="user" />
			</div>
			<div class="form-group">
				<label class="sr-only">日期</label>
				<input class="form-control" type="date" placeholder="日期" />
			</div>
			<div class="form-group">
				<label class="sr-only">email</label>
				<input class="form-control" type="email" placeholder="enter email" />
			</div>
			<div class="form-group">
				<label class="sr-only">password</label>
				<input class="form-control" type="password" placeholder="enter password" />
			</div>
			<div class="form-group">
				<label>选择文件</label>
				<input type="file"/>
				<p class="help-block">选择你需要的文件</p>
			</div>
		</form>
		-->
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input class="form-control" type="email" placeholder="Email" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input class="form-control" type="password" placeholder="password" />
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-10 col-sm-offset-2">
					<div class="checkbox">
						<label>
							<input type="checkbox" />记住密码
						</label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">登录</button>
				</div>
			</div>
		</form>
	</body>
</html>
